<template>
  <div id="data-view">
    <dv-full-screen-container>
      <div style="overflow-y: auto;">
        <top-header />
        <div class="main-content">
          <div class="main-first ">
            <div class="main-first-left">
              <leftContainer />
            </div>
            <div class="main-first-middle">
              <middleContainer />
            </div>
            <div class="main-first-right">
              <rightContainer />
            </div>
          </div>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import topHeader from './components/topHeader';
import leftContainer from './components/leftContainer';
import middleContainer from './components/middleContainer';
import rightContainer from './components/rightContainer';

export default {
  name: 'DataView',
  components: {
    topHeader,
    leftContainer,
    middleContainer,
    rightContainer
  }

};
</script>
;
<style lang="scss"  >
#data-view {
  width: 100%;
  height: 100%;
  background-color: #030409;
  color: #fff;

  #dv-full-screen-container {
    background-image: url('../../assets/images/mapper/bg.png');
    background-size: 100% 100%;
    box-shadow: 0 0 3px blue;
    display: flex;
    flex-direction: column;
  }
  .main-content {
    display: flex;
    flex-direction: column;
    padding:10px;
    .main-first{
      display: flex;
      .main-first-left{
        flex:1.1
      }
       .main-first-middle{
        flex:3;
        margin: 0px 15px
      }
       .main-first-right{
        flex:1.1
      }

    }
  }
}
.main-second{
  margin-top: 10px;
}
.amap-icon img {
    position: absolute;
    z-index: -1;
    width: 30px;
}
</style>
